<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
<style>
  body {
    margin: 20px;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
</head>
<body>

<canvas id="canvas" width="650" height="350"></canvas>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Style
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;
ctx.font = '18px Arial';
ctx.textAlign = 'center';

// --- Define coordinates ---
const x_left_corner = 120;
const y_top = 120;
const y_bottom = 135;
const x_right_end = 600;
const pivot_x = 420; // Represents 7.5cm distance from the left corner
const pivot_half_width = 30;

// Coordinates for the bent section P-Q-R-S
const x_outer_vert = x_left_corner;
const x_inner_vert = x_left_corner + (y_bottom - y_top); // Keep wire thickness consistent
const q_y = 220;
const r_x = 145;
const r_y = 250;
const s_y = 245;

// --- Draw the Stiff Wire (with a gap for the pivot) ---
ctx.beginPath();
// Right part of the wire
ctx.moveTo(x_right_end, y_top);
ctx.lineTo(pivot_x + pivot_half_width, y_top);
ctx.moveTo(x_right_end, y_bottom);
ctx.lineTo(pivot_x + pivot_half_width, y_bottom);

// Left part of the wire
// Top/Outer Edge
ctx.moveTo(pivot_x - pivot_half_width, y_top);
ctx.lineTo(x_outer_vert, y_top); // Horizontal part
ctx.lineTo(x_outer_vert, q_y);   // Vertical part (PQ)
ctx.lineTo(r_x, r_y);           // Angled part (QR)

// Bottom/Inner Edge
ctx.moveTo(pivot_x - pivot_half_width, y_bottom);
ctx.lineTo(x_inner_vert, y_bottom); // Horizontal part
ctx.lineTo(x_inner_vert, s_y);    // Vertical part (RS)
ctx.lineTo(r_x, r_y);             // Connects to R
ctx.stroke();


// --- Draw the Pivot ---
ctx.save();
ctx.translate(pivot_x, (y_top + y_bottom) / 2);
ctx.rotate(-25 * Math.PI / 180); // Rotate to a diagonal angle
// Draw the main body of the pivot (rectangle)
ctx.beginPath();
ctx.rect(-pivot_half_width, -8, pivot_half_width * 2, 16);
ctx.stroke();
// Draw the small triangle at the tip
ctx.beginPath();
ctx.moveTo(pivot_half_width, 0);
ctx.lineTo(pivot_half_width - 8, 5);
ctx.lineTo(pivot_half_width - 8, -5);
ctx.closePath();
ctx.fill();
ctx.restore();


// --- Draw the Dimension Line ---
const dim_y = 80;
// Dashed line from corner
ctx.beginPath();
ctx.setLineDash([4, 4]);
ctx.moveTo(x_left_corner, y_top);
ctx.lineTo(x_left_corner, dim_y);
ctx.stroke();
ctx.setLineDash([]);

// Horizontal line with arrow
ctx.beginPath();
ctx.moveTo(x_left_corner, dim_y);
ctx.lineTo(pivot_x, dim_y);
// Arrowhead
ctx.moveTo(pivot_x, dim_y);
ctx.lineTo(pivot_x - 10, dim_y - 5);
ctx.moveTo(pivot_x, dim_y);
ctx.lineTo(pivot_x - 10, dim_y + 5);
ctx.stroke();

// Small triangle marker on the wire
ctx.beginPath();
ctx.moveTo(pivot_x, y_top);
ctx.lineTo(pivot_x - 6, y_top - 10);
ctx.lineTo(pivot_x + 6, y_top - 10);
ctx.closePath();
ctx.fill();


// --- Add Labels ---
// Text labels
ctx.textAlign = 'left';
ctx.fillText("7.5 cm", (x_left_corner + pivot_x) / 2 - 30, dim_y - 10);
ctx.fillText("P", x_outer_vert - 25, 180);
ctx.fillText("Q", x_outer_vert - 25, q_y + 10);
ctx.fillText("R", r_x, r_y + 20);
ctx.fillText("S", x_inner_vert + 5, 180);

// Labels with pointers
// pivot
ctx.fillText("pivot", pivot_x + 30, 165);
ctx.beginPath();
ctx.moveTo(pivot_x + 30, 160);
ctx.lineTo(pivot_x + 10, 140);
ctx.stroke();

// stiff wire
ctx.fillText("stiff wire", 490, 170);
ctx.beginPath();
ctx.moveTo(525, 165);
ctx.lineTo(525, y_bottom + 2); // Point to the bottom line of the wire
ctx.stroke();

// Figure caption
ctx.textAlign = 'center';
ctx.font = 'bold 18px Arial';
ctx.fillText("Fig. 8.1", canvas.width / 2, 330);

</script>

</body>
</html>